<template>
  <div class='classify'>
    <div class="panelsbox">
      <div class="scroll-list-wrap-left">
        <cube-scroll class="leftpanels">
          <ul>
            <li
              v-for="(list,index) in tabslabel"
              @click='selectlist(index)'
              :class="list.active?'active':''"
              :key='index'
            >
              {{list.label}}
            </li>
          </ul>
        </cube-scroll>
      </div>
      <div class="scroll-list-wrap-right">
        <cube-scroll class="rightpanels">
          <ul>
            <li
              v-for="(tag,index) in tags"
              :key="index"
            >
              <img
                :src="tag.image"
                alt=""
              >
              <p>
                {{tag.label}}
              <i class="cubeic-add" @click="addCart(tag.label)"></i></p>
            </li>
          </ul>
        </cube-scroll>
      </div>
    </div>
  </div>
</template>
<script>
 import { mapMutations } from 'vuex'
export default {
 
  components: {},
  data() {
    return {
      //每点击一次分类，就把分类的详情信息放进这个空数组，再去渲染
      tags: [],
      tabslabel: [
        {
          label: "热门推荐",
          active: true,
        },
        {
          label: "手机数码",
          active: false,
        },
        {
          label: "家用电器",
          active: false,
        },
        {
          label: "家用空调",
          active: false,
        },
        {
          label: "电脑产品",
          active: false,
        },
        {
          label: "计生情趣",
          active: false,
        },
        {
          label: "美妆护肤",
          active: false,
        },
        {
          label: "口红",
          active: false,
        },
        {
          label: "手袋",
          active: false,
        },
        {
          label: "金银财宝",
          active: false,
        },
        {
          label: "手机数码",
          active: false,
        },
        {
          label: "手机数码",
          active: false,
        },
      ],
    };
  },
  methods: {
    //点击各个分类，获取个分类的详情信息
    selectlist(index) {
      this.tabslabel = this.tabslabel.map((e) => {
        if (this.tabslabel.indexOf(e) === index) {
          e.active = true;
          return e;
        } else {
          e.active = false;
          return e;
        }
      });
      this.$http
        .getRequest(
          "https://www.fastmock.site/mock/ae6682113fb6e2c2e99938791160897e/api/classify"
        )
        .then((res) => {
          this.tags = res.data;
        })
        .catch((err) => {
          alert("获取数据失败");
        });
    },
    //跳转进此页面，直接获取第一个分类的详情信息
    async getclassify(index) {
      const result = await this.$http.getRequest(
        "https://www.fastmock.site/mock/ae6682113fb6e2c2e99938791160897e/api/classify",
        {
          params: { type: 0 },
        }
      );

      this.tags = result.data;
    },

    ...mapMutations([
      'addCart',
      
      ]
      )
   
  },
  created() {
    //当创建好数据时,获取到数据，
    //获取默认的分类数据
    this.getclassify(0);
  },
};
</script>
<style lang='stylus' scoped>
.classify {
  padding-bottom: 50px;

  .panelsbox {
    display: flex;

    .scroll-list-wrap-left{
      
      height: 610px;
      width: 30%;
      .leftpanels {
        
        li {
          height: 80px;
          line-height: 80px;
          border-bottom: 1px solid #fff;
          color: #333;
          background: #f8f8f8;
          font-size: 14px;
        }

        .active {
          background: #fff;
          color: #e93b3d;
        }
      }
    }

    .scroll-list-wrap-right {
       width: 70%;
      height: 610px;

      .rightpanels {
       
        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            width: 50%;
            justify-content: center;
            align-items: center;
            font-size: 15px;

            img {
              width: 80px;
              height: 80px;
            }
          }
        }
      }
    }
  }
}
</style>